<template>
  <section>
    <el-row type="flex" justify="space-between" :gutter="20">
      <el-col :span="12">
        <div
          v-if="data[0].time.length"
          style="
            width: 100%;
            height: 500px;
            background-color: rgba(7, 123, 232, 0.05);
          "
          id="trend1"
        ></div>
        <div v-else style="text-align: center; line-height: 100px;color: #909399;">暂无数据</div>
      </el-col>
      <el-col :span="12">
        <div
          v-if="data[1].time.length"
          style="
            width: 100%;
            height: 500px;
            background-color: rgba(255, 151, 0, 0.05);
          "
          id="trend2"
        ></div>
        <div v-else style="text-align: center; line-height: 100px;color: #909399;">暂无数据</div>
      </el-col>
    </el-row>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import Constant from "@/lib/Constant";
import Echarts from "echarts";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected data: any = [{ time: [] }, { time: [] }];
  @Watch("data", { immediate: true, deep: true })
  protected getData() {
    const { time, totalQty } = this.data[0];
    if (time.length) {
      this.draw("trend1", time, totalQty);
    }
    const { time: time2, total_qty: totalQty2 } = this.data[0];
    if (time2.length) {
      this.draw("trend2", time2, totalQty2);
    }
  }
  protected mounted() {
    // this.draw();
  }

  private draw(id: string, time: [], qty: []) {
    const element: any = document.getElementById(id);
    // const element2: any = document.getElementById("trend2");
    const myChart = Echarts.init(element);
    // const myChart2 = Echarts.init(element2);
    myChart.setOption({
      xAxis: {
        name: "交易时间",
        type: "category",
        data: time
      },
      yAxis: {
        type: "value",
        min: 0,
        name: "交易电量（度）"
        // name: yName
      },
      series: [
        {
          data: qty,
          type: "line",
          smooth: true,
          itemStyle: {
            normal: {
              color: "#077BE8"
            }
          }
        }
      ]
    });
    myChart.dispatchAction({
      type: "mousemove"
    });

    // myChart2.setOption({
    //   xAxis: {
    //     name: "交易时间",
    //     type: "category",
    //     data: this.data[1].time
    //   },
    //   yAxis: {
    //     type: "value",
    //     min: 0,
    //     max: 400,
    //     name: "交易电量（度）"
    //   },
    //   series: [
    //     {
    //       data: this.data[1].total_qty,
    //       type: "line",
    //       smooth: true,
    //       itemStyle: {
    //         normal: {
    //           color: "#FF9700"
    //         }
    //       }
    //     }
    //   ]
    // });
    // myChart2.dispatchAction({
    //   type: "mousemove"
    // });
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
</style>


